<template>
  <van-cell class="comment-item-wrap">
    <!-- 评论者头像 -->
    <van-image 
        class="author_photo"
        slot="icon"
        round
        :src="comment.aut_photo" 
        fit="cover"
    />
    <!-- 评论者name 和 内容 -->
    <div slot="title">
      <!-- name 点赞 内容-->
      <div class="title-wrap">
        <div class="author_name">{{comment.aut_name}}</div>
        <div 
          class="like-wrap"
          @click="likeClick"
        >
          <van-icon
            class="like-icon" 
            :class="{
              liked: comment.is_liking
            }"
            :name="comment.is_liking ? 'good-job' : 'good-job-o'" 
          />
          <span class="like-number">{{comment.like_count}}</span>
        </div> 
      </div>
      <div class="comment_content">{{comment.content}}</div>
    </div>
    <!-- 时间 和 回复 -->
    <div class="reply-wrap" slot="label">
      <span class="pubupdate">{{comment.pubdate | formatTime('MM-DD HH:mm')}}</span>
      <van-button 
        class="reply-btn"
        round
        size="mini"
        @click="replyBtnClick"
      >{{comment.reply_count}} 回复</van-button>
    </div>
  </van-cell>
</template>

<script>
import {addCommentLike, deleteCommentLike} from '@/api/article'

export default {
  name: "CommentItem",
  components: {},
  props: {
    comment: {
      type: Object,
      required: true,
      default() {
        return Object
      }
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    // 点赞
    async likeClick() {
      const commentId =  this.comment.com_id.toString();
      if (this.comment.is_liking) {
        const {data} = await deleteCommentLike(commentId);
        this.comment.like_count --;
        console.log('取消点赞',data);
      } else {
        const {data} = await addCommentLike(commentId);
        this.comment.like_count ++;
        console.log('点赞成功',data);
      }
      this.comment.is_liking = !this.comment.is_liking;
    },
    // 回复按钮
    replyBtnClick() {
      this.$emit('reply-btn-click',this.comment)
    }
  },
  created() {},
  mounted() {},
}
</script>

<style lang="less" scoped>
//@import url(); 引入公共css类
.comment-item-wrap {
  .author_photo {
    margin-right: 12px;
    width: 36px;
    height: 36px;
  }
  .title-wrap {
    display: flex;
    justify-content: space-between;
    .author_name {
      font-size: 14px;
      color: #406599;
    }
    .like-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .comment_content {
      font-size: 16px;
      color: #222;
    }
  }
  .reply-wrap {
    display: flex;
    justify-items: center;
    align-items: flex-end;
    .pubupdate {
      font-size: 10px;
      margin-right: 10px;
    }
    .reply-btn {
      padding-right: 5px;
      padding-left: 5px;
      height: 20px;
    }
  }
  .liked {
    color: red;
  }
}
</style>
